@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2+px;
}
@mixin psoi{
    position: absolute;
    top: 0;
}
.mobile{
    padding: 0 3%;
    background: #FFFFFF;
    header{
        overflow:hidden;
        .back{
            float: left;
            text-align: center;
            width: p(123);
            height: p(57);
            line-height: p(51);
            border-radius: p(17);
            border: 2px solid #ff9344;
            margin-left: p(24);
            margin-top: p(47);
        }
        .sel{
            float: right;
            margin-top: p(47);
            width: p(157);
            height: p(54);
            border: p(2) solid #ff9344;
            position: absolute;
            right:p(21); 
            &::after{
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top: p(15) solid #ff9344;
                border-left: p(15) solid transparent;
                border-right: p(15) solid transparent;
                position: absolute;
                top: p(22);
                right: p(11);
            }
            select{
                width: 100%;
                height: 100%;
                border: none;
                background: transparent;
                padding-left: p(14);
                /*将默认的select选择框样式清除*/
                appearance:none;
                -moz-appearance:none;
                -webkit-appearance:none;
            }
            /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
            select::-ms-expand { display: none; }
        }
        .BT{
            text-align: center;
            width: p(140);
            margin: 0 auto;
            margin-top: p(47);
        }
    }//header

    section{
        margin-bottom: p(161);
        .search{
            margin: p(33) auto;
            width: p(268);
            height: p(54);
            line-height: p(54);
            border: 1px solid #ff9344;
            border-radius: p(24);
            overflow: hidden;
            input[type="text"]{
                width: p(168);
                font-size: p(23);
                margin-left:p(31) ;
                border: none;
                vertical-align: top;
                margin-top: p(12);
            }
            input[type="image"]{
                width: p(37);
                height: p(32);
                margin-top: p(8);
                vertical-align: top;
            }
        }//search
        .fenlei{
            overflow: hidden;
            h1{
                text-align: center;
                font-size: p(26);
            }
            ul{
                width:68.2%;
                margin: p(14) auto;
                li{
                    float: left;
                    width:24.2%;
                    height: p(64);
                    line-height: p(64);
                    font-size: p(19);
                    background: #dcdcdc;
                    text-align: center;
                    a{
                        color:black;
                    }
                }
            }
        }
        .title{
            overflow: hidden;
            margin-top: p(38);
            margin-bottom: p(32);
            height: p(45);
            line-height: p(45);
           .img_left{
                width: p(31);
                height: p(45);
            }
           .img_right{
                width: p(25);
                height: p(26);
                margin-top: p(8);
            }
            span{
                font-size: p(30);
                margin-top: p(2);
                margin-left: p(9);
            }
            p{
                font-size: p(24);
                margin-right: p(9);
            }
            .title_left{
                float: left;
                vertical-align: middle;
            }
            .title_right{
                float: right;
                vertical-align: middle;
            }
        }
        .product{
            overflow: hidden;
            .pro_left{
                float: left;
                width: 37.2%;
                padding-top: 49.71%;
                overflow: hidden;
                position: relative;
                img{
                    @include psoi;
                    width: 100%;
                }
            }//pro_left
            .pro_right{
                float: left;
                margin-left: 1.0%;
                width: 59.49%;
                padding-top:49.71%;
                overflow: hidden;
                position: relative;
                .pro_right_top{
                    width: 100%;
                    padding-top: 34.7%;
                    overflow: hidden;
                    position: absolute;
                    top:0;
                    img{
                        width: 100%;
                        @include psoi;
                    }
                }
                .pro_right_btm{
                    position: absolute;
                    margin-top:1.0% ;
                    bottom: 0;
                    width: 100%;
                    padding-top:46.6%;
                    overflow: hidden;
                    .pro_right_btm_left{
                        @include psoi;
                        width: 46.2%;
                        padding-top: 46.6%;
                        overflow: hidden;
                        left: 0;
                        img{
                            @include psoi;
                            width: 100%;
                            left: 0;
                        }
                    }
                    .pro_right_btm_right{
                        @include psoi;
                        width: 50.2%;
                        padding-top:46.6%;
                        overflow: hidden;
                        right: 0;
                        img{
                            position: absolute;
                            top: 0;
                            width: 100%;
                        }
                    }
                }
            }
        }//product
        .moreRec{
            overflow: hidden;
            div{
                float: left;
                width:30.3%;
                margin-right: 4.3%;
                &:last-child{
                    margin-right: 0;
                    float: right;
                }
            }
            img{
                width:100%;
                height: p(200);
            }
        }
    }//section
}//mobile